import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import "../style/TabList.scss";

const TabList = ({ files, selectId, unSaveList, onTabClick, onTabClose }) => {
  return (
    <ul className="nav nav-pills tabList">
      {files.map((c) => {
        const unSaveCur = unSaveList.includes(c.id);
        const classes = classNames("nav-link", {
          active: c.id === selectId,
          unSaveCls: unSaveCur,
        });

        return (
          <li className="nav-item" key={c.id}>
            <a
              className={classes}
              href="#"
              onClick={(e) => {
                e.preventDefault();
                onTabClick(c.id);
              }}
            >
              {c.title}
              <span
                className="ml-2 close-tab"
                onClick={(e) => {
                  e.stopPropagation();
                  onTabClose(c.id);
                }}
              >
                <FontAwesomeIcon icon={faTimes} />
              </span>
              {unSaveCur && <span className="unsaved-tab ml-2"></span>}
            </a>
          </li>
        );
      })}
    </ul>
  );
};

TabList.propTypes = {
  files: PropTypes.array,
  selectId: PropTypes.string,
  unSaveList: PropTypes.array,
  onTabClick: PropTypes.func,
  onTabClose: PropTypes.func,
};
TabList.defaultProps = {
  files: [],
  unSaveList: [],
};

export default TabList;
